<template>
	<view class="health-report-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="title">健康报告</text>
		</view>
		
		<!-- 健康概览 -->
		<view class="health-overview">
			<view class="overview-header">
				<text class="overview-title">健康概览</text>
				<text class="overview-date">{{ currentDate }}</text>
			</view>
			
			<view class="health-score">
				<view class="score-circle">
					<text class="score-value">{{ healthData.score }}</text>
				</view>
				<view class="score-desc">
					<text class="score-text">健康评分</text>
					<text class="score-tip">{{ getScoreTip() }}</text>
				</view>
			</view>
		</view>
		
		<!-- 血糖数据 -->
		<view class="data-card">
			<view class="card-header">
				<text class="card-title">血糖数据</text>
				<view class="card-action" @tap="navigateToBloodSugar">查看详情</view>
			</view>
			
			<view class="data-grid">
				<view class="data-item">
					<text class="data-value">{{ healthData.bloodSugar.avg }}mmol/L</text>
					<text class="data-label">平均血糖</text>
				</view>
				<view class="data-item">
					<text class="data-value">{{ healthData.bloodSugar.max }}mmol/L</text>
					<text class="data-label">最高血糖</text>
				</view>
				<view class="data-item">
					<text class="data-value">{{ healthData.bloodSugar.min }}mmol/L</text>
					<text class="data-label">最低血糖</text>
				</view>
				<view class="data-item">
					<text class="data-value">{{ healthData.bloodSugar.records }}</text>
					<text class="data-label">记录次数</text>
				</view>
			</view>
			
			<view class="chart-container">
				<image src="/static/images/chart-placeholder.png" mode="widthFix" class="chart-image"></image>
			</view>
		</view>
		
		<!-- 饮食数据 -->
		<view class="data-card">
			<view class="card-header">
				<text class="card-title">饮食数据</text>
				<view class="card-action" @tap="navigateToDiet">查看详情</view>
			</view>
			
			<view class="data-grid">
				<view class="data-item">
					<text class="data-value">{{ healthData.diet.calories }}kcal</text>
					<text class="data-label">平均热量</text>
				</view>
				<view class="data-item">
					<text class="data-value">{{ healthData.diet.carbs }}g</text>
					<text class="data-label">碳水化合物</text>
				</view>
				<view class="data-item">
					<text class="data-value">{{ healthData.diet.protein }}g</text>
					<text class="data-label">蛋白质</text>
				</view>
				<view class="data-item">
					<text class="data-value">{{ healthData.diet.fat }}g</text>
					<text class="data-label">脂肪</text>
				</view>
			</view>
			
			<view class="chart-container">
				<image src="/static/images/chart-placeholder.png" mode="widthFix" class="chart-image"></image>
			</view>
		</view>
		
		<!-- 健康建议 -->
		<view class="advice-card">
			<view class="card-header">
				<text class="card-title">健康建议</text>
			</view>
			
			<view class="advice-list">
				<view class="advice-item" v-for="(item, index) in healthData.advice" :key="index">
					<view class="advice-icon" :class="'advice-icon-' + item.type"></view>
					<view class="advice-content">
						<text class="advice-title">{{ item.title }}</text>
						<text class="advice-desc">{{ item.content }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	
	// 获取当前日期
	const currentDate = computed(() => {
		const now = new Date()
		const year = now.getFullYear()
		const month = (now.getMonth() + 1).toString().padStart(2, '0')
		const day = now.getDate().toString().padStart(2, '0')
		return `${year}-${month}-${day}`
	})
	
	// Mock健康数据
	const healthData = ref({
		score: 85,
		bloodSugar: {
			avg: 6.2,
			max: 7.8,
			min: 5.1,
			records: 28
		},
		diet: {
			calories: 1850,
			carbs: 220,
			protein: 75,
			fat: 60
		},
		advice: [
			{
				type: 'diet',
				title: '饮食建议',
				content: '建议减少碳水摄入，增加蛋白质摄入，控制总热量在1800kcal以内。'
			},
			{
				type: 'exercise',
				title: '运动建议',
				content: '每天进行30分钟中等强度有氧运动，如快走、慢跑或游泳。'
			},
			{
				type: 'medicine',
				title: '用药提醒',
				content: '请按时服用二甲双胍，每日两次，饭后服用。'
			}
		]
	})
	
	// 获取健康评分提示
	const getScoreTip = () => {
		const score = healthData.value.score
		if (score >= 90) return '健康状况优秀'
		if (score >= 80) return '健康状况良好'
		if (score >= 70) return '健康状况一般'
		if (score >= 60) return '需要注意'
		return '需要改善'
	}
	
	// 导航到血糖页面
	const navigateToBloodSugar = () => {
		uni.switchTab({
			url: '/pages/bloodSugar/index'
		})
	}
	
	// 导航到饮食页面
	const navigateToDiet = () => {
		uni.switchTab({
			url: '/pages/diet/index'
		})
	}
</script>

<style lang="scss">
	.health-report-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 30rpx;
		
		.page-header {
			background-color: #8cc9a1;
			padding: 60rpx 30rpx 30rpx;
			
			.title {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		
		.health-overview {
			background-color: #fff;
			margin: 20rpx;
			border-radius: 12rpx;
			padding: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			
			.overview-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.overview-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.overview-date {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.health-score {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				
				.score-circle {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					background: linear-gradient(135deg, #8cc9a1 0%, #6eb888 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
					
					.score-value {
						color: #fff;
						font-size: 40rpx;
						font-weight: bold;
					}
				}
				
				.score-desc {
					display: flex;
					flex-direction: column;
					
					.score-text {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					
					.score-tip {
						font-size: 26rpx;
						color: #8cc9a1;
					}
				}
			}
		}
		
		.data-card {
			background-color: #fff;
			margin: 20rpx;
			border-radius: 12rpx;
			padding: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.card-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.card-action {
					font-size: 24rpx;
					color: #8cc9a1;
				}
			}
			
			.data-grid {
				display: flex;
				flex-wrap: wrap;
				margin: 0 -10rpx;
				
				.data-item {
					width: 50%;
					padding: 10rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					
					.data-value {
						display: block;
						font-size: 36rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 5rpx;
					}
					
					.data-label {
						display: block;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.chart-container {
				margin-top: 20rpx;
				
				.chart-image {
					width: 100%;
					height: 300rpx;
					background-color: #f9f9f9;
				}
			}
		}
		
		.advice-card {
			background-color: #fff;
			margin: 20rpx;
			border-radius: 12rpx;
			padding: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			
			.advice-list {
				.advice-item {
					display: flex;
					padding: 15rpx 0;
					border-bottom: 1px solid #f5f5f5;
					
					&:last-child {
						border-bottom: none;
					}
					
					.advice-icon {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						flex-shrink: 0;
						
						&.advice-icon-diet {
							background-color: #8cc9a1;
						}
						
						&.advice-icon-exercise {
							background-color: #5bc0de;
						}
						
						&.advice-icon-medicine {
							background-color: #f0ad4e;
						}
					}
					
					.advice-content {
						flex: 1;
						
						.advice-title {
							display: block;
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 5rpx;
						}
						
						.advice-desc {
							display: block;
							font-size: 24rpx;
							color: #666;
							line-height: 1.5;
						}
					}
				}
			}
		}
	}
</style> 